<!DOCTYPE html>
<html lang="en">
<head>
    <title>销售绩效考核报表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .content {
            padding: 10px 12px;
        }

        .table > tbody > tr > td {
            padding: 0 2px;
        }

        .moduleName {
            height: 28px;
            line-height: 28px;
            font-size: 22px;
            border-bottom: 1px solid #ddd;
            text-align: left;

        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            padding: 10px 0;
            margin-bottom: 0px;
            box-shadow: none;
            position: relative;
            overflow: hidden;

        }

        .infoReport {
            display: flex;
            justify-content: flex-start;
            text-align: left;
            margin-left: 10px;
        }

        .infoReport div {
            margin: 0 10px;
        }

        .lineOne {
            text-align: center;
            min-width: 70px;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table > thead > tr > th {
            padding: 0;
        }

        .table > tbody > tr > td {
            position: relative;
        }

        .selectBox {
            height: 25px;
            margin-bottom: 10px;
        }
        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: center;
        }
    </style>
</head>
<body>
<section class="content" id="app" style="min-height: 100vh" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="row iframeH">
        <div class="col-md-12">
            <!--<div class="selectBox">-->
                <!--&lt;!&ndash;<input type="text" placeholder="姓名"&ndash;&gt;-->
                <!--&lt;!&ndash;class="form-control pull-left input-sm "&ndash;&gt;-->
                <!--&lt;!&ndash;&ndash;&gt;-->
                <!--&lt;!&ndash;style="width: 120px; ">&ndash;&gt;-->
                <!--<input type="text"-->
                       <!--class="form-control pull-left input-sm col-md-8"-->
                       <!--v-model="selectParameter.dateTime" @focus="showDatePicker($event)"-->
                       <!--placeholder="请选择日期"-->
                       <!--style="width: 190px; margin-left: 1px;">-->
                <!--<button type="button" class="pull-right btn oaBtn btn-sm col-md-4"-->
                        <!--style="margin-right: 0px;width: 70px;height: 25px" @click="searchDate">查询-->
                <!--</button>-->
            <!--</div>-->
            <table class="table table-bordered text-center table-width">
                <thead>
                <tr>
                    <!--<th style="width: 100px">公司</th>-->
                    <!--<th style="width: 50px">岗位</th>-->
                    <th style="width: 40px">区域</th>
                    <th style="width: 80px">负责人</th>
                    <!--<th style="width: 60px">考核<br>周期</th>-->
                    <th style="width: 50px;">目标</th>
                    <th style="width: 50px;">完成</th>
                    <th style="width: 75px;">奖励<br>金额</th>
                    <th style="width: 75px;">罚款<br>金额</th>
                    <th style="width: 70px">奖惩<br>合计</th>
                    <th style="width: 55px">完成<br>情况</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in managerList" v-if="item.companyName!='重庆迎风'">
                    <td class="lineOne" v-if="item.roleName=='总经理'|| item.roleName=='销售总监'||item.roleName=='区域总监'">
                        <span>{{item.companyName}}</span>
                    </td>
                    <td v-else class="lineOne"><span>{{item.regionName}}</span></td>
                    <td>{{item.userName}}</td>
                    <!--<td>{{item.cycle}}</td>-->
                    <td>{{item.targetNum?item.targetNum:"-"}}</td>
                    <td>{{item.finishNum?item.finishNum:"-"}}</td>
                    <td>{{item.saleReward?item.saleReward:"-"}}</td>
                    <td>{{item.salePunishment?item.salePunishment:"-"}}</td>
                    <td>{{item.money?item.money:"-"}}</td>
                    <td :style="Number(item.finishNum)>=Number(item.targetNum)?'':'color:red'">{{Number(item.finishNum)>=Number(item.targetNum)?"已完":"未完"}}</td>
                </tr>
                <tr>
                    <td colspan="8" style="height:10px; background: #f8f8f8;"></td>
                </tr>
                <template v-for="(item,i) in tableData"  >
                    <tr v-if="item.roleName">
                        <!--<td :rowspan="item.companyNamespan" :class="{hidden: item.companyNamedis}">-->
                        <!--{{item.companyName}}-->
                        <!--</td>-->
                        <!--<td :rowspan="item.roleNamespan" :class="{hidden: item.roleNamedis}">-->
                        <!--{{item.roleName}}-->
                        <!--</td>-->
                        <td class="lineOne" v-if="item.roleName=='总经理'|| item.roleName=='销售总监'||item.roleName=='区域总监'">
                            <span>{{item.companyName}}</span>
                        </td>
                        <td v-else class="lineOne"><span>{{item.regionName}}</span></td>
                        <td>{{item.userName}}</td>
                        <!--<td>{{item.cycle}}</td>-->
                        <td>{{item.targetNum?item.targetNum:"-"}}</td>
                        <td>{{item.finishNum?item.finishNum:"-"}}</td>
                        <td>{{item.saleReward?item.saleReward:"-"}}</td>
                        <td>{{item.salePunishment?item.salePunishment:"-"}}</td>
                        <td>{{item.money?item.money:"-"}}</td>
                        <td :style="Number(item.finishNum)>=Number(item.targetNum)?'':'color:red'">{{Number(item.finishNum)>=Number(item.targetNum)?"已完":"未完"}}</td>
                    </tr>
                    <tr v-else>
                        <td :rowspan="item.companyNamespan" :class="{hidden: item.companyNamedis}">
                            {{item.companyName}}
                        </td>
                        <td colspan="7" style="height:10px; background: #f8f8f8;"></td>
                    </tr>

                </template>
                <!--<tr>-->
                    <!--<td colspan="2">合计</td>-->
                    <!--<td>{{tableAllData.targetNum==0?'-':tableAllData.targetNum}}</td>-->
                    <!--<td>{{tableAllData.finishNum==0?'-':tableAllData.finishNum}}</td>-->
                    <!--<td>{{tableAllData.saleReward==0?'-':tableAllData.saleReward}}</td>-->
                    <!--<td>{{tableAllData.salePunishment==0?'-':tableAllData.salePunishment}}</td>-->
                    <!--<td>{{tableAllData.money==0?'-':tableAllData.money}}</td>-->
                    <!--<td>-</td>-->
                <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            var text = $(this).text();
            if (text != "") {
                text = "<i></i>" + text;
                $(".div-td-content-more").html(text).css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
    var H = $(window).height();
    $(".iframeH").height(H);
    var app = new Vue({
        el: '#app',
        data: {
            managerList:[],
            list: [],
            tableData: [],
            tableAllData: {},
            selectParameter: {
                companyId: getUrlParamObj().companyId,
                name: "",
                dateTime: new Date().Format("yyyy-MM")//今天
            }
        },
        methods: {
            //获取合计
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += Number(arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)
                    if (key == "monthMoney") {
                        console.log(arr[i][key])
                    }
                }
                return number;
            },
            //初始化时间控件
            showDatePicker: function (e, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.selectParameter.dateTime = dp.cal.getNewDateStr();
                        return true;
                    },
                    dateFmt: 'yyyy-MM'
                });
                $(e.target).blur();
            },
            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                list[k][field + 'span']++;
                                list[k][field + 'dis'] = false;
                                list[i][field + 'span'] = 1;
                                list[i][field + 'dis'] = true;
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            getTableData: function () {
                var that = this;
                var parameter = that.selectParameter;
                $.ajax({
                    url: server.ip + urlConfig.warNewspaper.regionAchivementsService.getManagerSale,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(parameter),
                    success: function (r) {
                        var res = JSON.parse(r)
                        var records = res.data.sendData.records;
                        that.managerList = that.tablesMergeCell(records);
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
                $.ajax({
                    url: server.ip + urlConfig.warNewspaper.regionAchivementsService.getSale,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(parameter),
                    success: function (r) {
                        var dialog = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(dialog))

                        var res = JSON.parse(r)
                        var data = res.data.sendData.records;
                        var newdata = []
                        for (var i = 0; i < data.length; i++) {
                            newdata.push(data[i])
                            if (i != data.length - 1) {
                                if (data[i].roleName != data[i + 1].roleName) {
                                    newdata.push({"companyName": data[i].companyName})
                                }
                            }

                        }
                        that.tableData = that.tablesMergeCell(newdata);
                        that.tableAllData.finishNum = that.getCount(data, "finishNum")
                        that.tableAllData.targetNum = that.getCount(data, "targetNum")
                        that.tableAllData.saleReward = that.getCount(data, "saleReward")
                        that.tableAllData.salePunishment = that.getCount(data, "salePunishment")
                        that.tableAllData.money = that.getCount(data, "money")
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            },
            searchDate: function () {
                var dialog = {
                    dialog: 'show'
                }
                prompt(JSON.stringify(dialog))
                this.getTableData()
            }
        },
        mounted: function () {
            var that = this;
            that.getTableData();
        }
    });

</script>

</body>
</html>